<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TensorSpace - LeNet Demo</title>
        <meta name="author" content="syt123450 / https://github.com/syt123450">
        <style>

            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #container {
                width: 100%;
                height: 100%;
                background-color: #000;
            }

        </style>
    </head>
    <body>

        <div id="container"></div>

        <script src="../assets/libs/jquery.min.js"></script>
        <script src="../assets/libs/three.min.js"></script>
        <script src="../assets/libs/tween.min.js"></script>
        <script src="../assets/libs/TrackballControls.js"></script>
        <script src="../assets/libs/tf.min.js"></script>
        <script src="../assets/libs/tensorspace.min.js"></script>

        <script>

            let modelContainer = document.getElementById( "container" );

            let model = new TSP.models.Sequential( modelContainer );

            model.add( new TSP.layers.GreyscaleInput() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Dense() );

            model.add( new TSP.layers.Dense() );

            model.add( new TSP.layers.Output1d( {

                outputs: [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ]

            } ) );

            model.load( {

                type: "keras",
                url: './convertedModel/model.json'

            } );

            model.init(function() {

                $.ajax( {

			        url: "../assets/data/5.json",
			        type: 'GET',
			        async: true,
			        dataType: 'json',
			        success: function ( data ) {

				        model.predict( data );

                    }

		        } );

            });

        </script>
    </body>
</html>
